<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Jumbotron</h1>
                        <small>A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>

                    </header>

                    <div class="card">
                        <div class="card-block">
                            <h3 class="card-block__title">Basic example</h3>

                            <br/>

                            <div class="jumbotron">
                                <h1 class="display-3">Hello, world!</h1>
                                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                                <hr class="my-4"/>

                                <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                            </div>

                            <br/>

                            <h3 class="card-block__title">Fluid width</h3>
                            <p>To make the jumbotron full width, and without rounded corners, add the <code>.jumbotron-fluid</code> modifier class and add a <code>.container</code> or <code>.container-fluid</code> within.</p>

                            <div class="jumbotron jumbotron-fluid">
                                <div class="container">
                                    <h1 class="display-3">Fluid jumbotron</h1>
                                    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>